<template>
  <div class="app-container">
    <el-button type="primary" @click="addMenu">添加</el-button>
    <el-table :data="menusList" style="width: 100%;margin-top:30px;" v-loading.body="listLoading" border>
      <el-table-column align="center" label="序号" width="100">
        <template scope="scope">
          {{scope.row.index}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="路径编码" width="300">
        <template scope="scope">
          {{scope.row.code}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单名称" width="200">
        <template scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单类型" width="200">
        <template scope="scope">
          {{scope.row.type}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单排序" width="200">
        <template scope="scope">
          {{scope.row.orderNum}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="上级菜单ID" width="200">
        <template scope="scope">
          {{scope.row.parentId}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑菜单':'添加菜单'">
      <el-form :model="menu" label-width="80px" label-position="left">
        <el-form-item label="路径编码">
          <el-input v-model="menu.code" placeholder="路径编码"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="menu.title" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select v-model="menu.type" placeholder="请选择菜单类型">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单排序">
          <el-input v-model="menu.orderNum" placeholder="菜单排序"></el-input>
        </el-form-item>

        <el-form-item label="上级菜单">
          <!-- <el-tree ref="tree" default-expand-all :check-strictly="checkStrictly" :data="routes" :props="defaultProps"
            show-checkbox node-key="id" class="permission-tree" /> -->
          <el-tree ref="tree" default-expand-all check-strictly :data="routes" :props="defaultProps"
            @check="checkGroupNode" show-checkbox node-key="id" class="permission-tree" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmMenu">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>


  //   import { page, add, getMenuTree, getRoleMenu } from 'api/role'
  //   const defaultRole = {
  //     id: '',
  //     roleName: '',
  //     description: '',
  //     routes: []
  //   }
  import { page, getMenuTree, add } from 'api/menu'
  const defaultMenu = {
    id: '',
    code: '',
    title: '',
    orderNum: '',
    parentId: '',
    type: ''
  }
  export default {
    data() {
      return {
        menusList: [],
        menu: Object.assign({}, defaultMenu),
        routes: [],
        dialogVisible: false,
        dialogType: 'new',
        listLoading: true,
        checkStrictly: false,
        total: 10,
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        listQuery: {
          page: 1,
          limit: 20,
          name: undefined
        },
        typeList: [{ label: '文件夹', value: 'dirt' }, { label: '菜单', value: 'menu' }]
      }
    },
    created() {
      // this.listLoading = true
      // this.rolesList.push({ 'name': 'admin', 'desc': '管理员' })
      // setTimeout(() => {
      //   this.listLoading = false
      // }, 1000);
      this.getlist()
      // console.log(this.rolesList);
    },
    computed: {
    },
    methods: {
      async getMenuTree() {
        getMenuTree().then(response => {
          this.routes = response.data;
          console.log(response.data)
          this.$refs.tree.store.defaultExpandAll = true;
          return Promise.resolve(true)
        })
      },
      getlist() {
        this.listLoading = true
        page(this.listQuery).then(response => {
          var data = response.data
          this.menusList = data.rows;
          this.total = data.total;
          this.listLoading = false;
          for (var ix in this.menusList) {
            this.menusList[ix].index = parseInt(ix, 10) + 1;
          }
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
      },
      addMenu() {
        this.dialogType = 'new'
        this.dialogVisible = true
        this.menu = Object.assign({}, defaultMenu)
        //this.menu.status = 1
        this.getMenuTree()

      },
      //   getRoleMenuIds(menuTree, menuIds, result) {
      //     if (menuTree.children == null || menuTree.children.length == 0) {
      //       if (menuIds.indexOf(menuTree.id) > -1) {
      //         result.push(menuTree.id);
      //       }
      //     } else {
      //       for (var i in menuTree.children) {
      //         this.getRoleMenuIds(menuTree.children[i], menuIds, result)
      //       }
      //     }
      //   },
      handleEdit(scope) {
        this.dialogType = 'edit'
        this.dialogVisible = true
        this.menu.title = scope.row.title
        this.menu.code = scope.row.code
        this.menu.orderNum = scope.row.orderNum
        // this.role.status = 1
        this.menu.id = scope.row.id
        this.menu.type = scope.row.type
        // this.getRoleTree().then(() => {
        //   getRoleMenu(scope.row.id).then(response => {
        //     if (response.status != 200) {
        //       this.$error(response.message)
        //       return
        //     }
        //     var roleMenuIds = []
        //     var result = []
        //     for (var i in response.data) {
        //       roleMenuIds.push(response.data[i].id)
        //     }

        //     this.getRoleMenuIds(this.routes[0], roleMenuIds, result)
        //     console.log(result)
        //     this.$refs.tree.setCheckedKeys(result)

        //   })
        // })

      },
      confirmMenu() {
        var menu = this.menu;
        if (menu.code == undefined || menu.code == '') {
          this.$error('请输入路径编码')
          return;
        }
        if (menu.title == undefined || menu.title == '') {
          this.$error('请输入菜单名称')
          return;
        }
        if (menu.type == undefined || menu.type == '') {
          this.$error('请输入菜单类型')
          return;
        }
        var nodes = this.$refs.tree.getHalfCheckedNodes().concat(this.$refs.tree.getCheckedNodes())
        var menuid = '-1';
        if (nodes.length != 0) {
          menuid = nodes[0].id
        }
        // var menuIds = []
        // for (var i in nodes) {
        //   menuIds.push(nodes[i].id)
        // }
        var obj = {}
        obj.title = this.menu.title
        obj.code = this.menu.code
        obj.orderNum = this.menu.orderNum
        obj.parentId = menuid
        obj.type = this.menu.type
        // obj.menuIds = menuIds
        // obj.status = this.role.status
        if (this.menu.id != undefined) {
          obj.id = this.menu.id
        }
        add(obj).then(response => {
          if (response.status == 200) {
            this.getlist()
            this.$success('保存成功')
          } else {
            this.$error(response.message)
          }
          const isEdit = this.dialogType === 'edit'
          this.dialogVisible = false
        })


      },

      checkGroupNode: function (a, b) {
        if (b.checkedKeys.length > 0) {
          this.$refs.tree.setCheckedKeys([a.id]);
        }
      }
    },

  }
</script>